import React, { Component } from 'react';
import moment from 'moment';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Row, Col, Input, List, Avatar, Button } from 'antd';
import { connect } from 'dva';
import proImg from '@/assets/proImg.png';
import DescriptionList from '@/components/DescriptionList';

const FormItem = Form.Item;
const { Description } = DescriptionList;
const { TextArea } = Input;
@connect(({ loading, saladetailUpdate }) => ({
  loading: loading.models.protection,
  detailList: saladetailUpdate.detailList,
}))
@Form.create()
class ProDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  onClose = () => {
    window.history.back();
  };

  proFeedBack = () => {
    const {
      form: { validateFields },
      onFeedBack,
      form,
    } = this.props;
    validateFields((err, values) => {
      if (!err) {
        onFeedBack(values);
        form.resetFields();
      }
    });
  };

  cancelSign = () => {
    const {
      form: { validateFields },
      onCancelSign,
    } = this.props;
    validateFields((err, values) => {
      if (!err) {
        onCancelSign(values);
      }
    });
  };

  modifyData = () => {
    const { onModifyData } = this.props;
    if (onModifyData) {
      onModifyData();
    }
  };

  // 修改
  proupdate = record => {
    const { dispatch } = this.props;
    dispatch({
      type: 'saladetailUpdate/getDetailMessage',
      payload: { wageOrderInfoId: record.wageOrderInfoId },
    });
  };

  // 模态框显隐
  handleModalVisible = () => {
    const { dispatch, form } = this.props;
    dispatch({
      type: 'saladetailUpdate/monUpdate',
      payload: { dateList: {} },
    });
    form.resetFields();
  };

  // 修改提交
  submitModalData = () => {
    const { dispatch, proBaseList, form, location } = this.props;
    const values = form.getFieldsValue();
    values.wageOrderInfoId = proBaseList.wageOrderInfoId;
    if (!values.bankCardId || !values.mobile || !values.accoHolderName) {
      return;
    }
    values.bankCardId = values.bankCardId;
    values.mobile = values.mobile;
    values.accoHolderName = values.accoHolderName;

    dispatch({
      type: 'saladetailUpdate/subUpdateData',
      payload: { params: values },
      callback: () => {
        const { wagePayProbId } = location.query;
        dispatch({
          type: 'saladetailUpdate/feactProDetail',
          payload: { wagePayProbId },
        });
      },
    });
  };

  render() {
    const {
      proBaseList,
      probRecord,
      form: { getFieldDecorator },
      isModify,
    } = this.props;
    return (
      <Card
        title="问题人员"
        style={{ border: '0px', marginBottom: 24, fontSize: 16, color: '#262626' }}
      >
        <Form>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="姓名">{(proBaseList && proBaseList.empName) || '--'}</Description>
            <Description term="证件号">{(proBaseList && proBaseList.idCode) || '--'}</Description>
            <Description term="手机号">
              {proBaseList && proBaseList.mobile ? proBaseList.mobile : '--'}
            </Description>
          </DescriptionList>

          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="客户">{(proBaseList && proBaseList.custName) || '--'}</Description>
            <Description term="签约方">
              {(proBaseList && proBaseList.ordSndrName) || '--'}
            </Description>
            <Description term="收入年月">
              {(proBaseList &&
                proBaseList.busiYmDate &&
                moment(proBaseList.busiYmDate).format('YYYY-MM')) ||
                '--'}
            </Description>
          </DescriptionList>

          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="收入类型">
              {(proBaseList && proBaseList.incmTypeName) || '--'}
            </Description>
            <Description term="问题说明">
              {(proBaseList && proBaseList.probDesc) || '--'}
            </Description>
            <Description term="提出人">{(proBaseList && proBaseList.operName) || '--'}</Description>
          </DescriptionList>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="操作时间">
              {(proBaseList && moment(proBaseList.orpdDate).format('YYYY-MM-DD HH:mm:ss')) || '--'}
            </Description>
          </DescriptionList>
        </Form>
        <Row gutter={64}>
          <Col xl={{ span: 16 }} lg={{ span: 16 }} md={{ span: 16 }} sm={24}>
            <FormItem label="反馈">
              {getFieldDecorator('content', {
                rules: [{ required: true, message: '请输入反馈内容' }],
              })(<TextArea placeholder="请输入反馈内容" maxLength={50} />)}
            </FormItem>
          </Col>
        </Row>
        <div>
          <h4>反馈记录</h4>
          <List
            itemLayout="horizontal"
            split={false}
            dataSource={probRecord || []}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={proImg} />}
                  title={
                    <div>
                      <span>{item.creName}</span>
                      <span style={{ marginLeft: 20 }}>{item.fdbk}</span>
                    </div>
                  }
                  description={
                    <div>
                      <p> {item.content}</p>
                      <p>{moment(item.creTime).format('YYYY-MM-DD HH:mm:ss')}</p>
                    </div>
                  }
                />
              </List.Item>
            )}
          />
        </div>
        <p style={{ textAlign: 'center', marginTop: 32 }}>
          <Button style={{ marginRight: 10 }} onClick={this.onClose}>
            关闭
          </Button>
          {isModify ? (
            <Button style={{ marginRight: 10 }} onClick={this.modifyData}>
              修改业务数据
            </Button>
          ) : null}
          <Button type="primary" style={{ marginRight: 10 }} onClick={this.proFeedBack}>
            反馈
          </Button>
          <Button type="primary" style={{ marginRight: 10 }} onClick={this.cancelSign}>
            反馈并取消标记
          </Button>
        </p>
      </Card>
    );
  }
}

export default ProDetail;


